// ===== 按钮 =====
$primary:rgb(55, 181, 229);
$primary_hover:rgba(55, 181, 229, .7);
$primary_active:rgb(5, 165, 228);
$success:rgb(103, 194, 58);
$success_hover:rgba(103, 194, 58, .7);
$success_active:rgb(66, 194, 2);
$info:rgb(144, 147, 153);
$info_hover:rgba(144, 147, 153, .7);
$info_active:rgb(113, 116, 121);
$warning:rgb(230, 162, 60);
$warning_hover:rgba(230, 162, 60, .7);
$warning_active:rgb(233, 141, 3);
$danger:rgb(245, 108, 108);
$danger_hover:rgba(245, 108, 108, .7);
$danger_active:rgb(247, 34, 34);

$button_medium_width:140px;
$button_medium_height:40px;
$button_medium_size:16px;

$button_small_width:110px;
$button_small_height:35px;
$button_small_size:14px;

$button_mini_height:25px;
$button_mini_width:80px;
$button_mini_size:10px;

// ===== 边框 =====
$border_radius:5px;

// ===== 背景 =====
$background_icon_size:20px;

// ===== 表格 =====
$table_bg:#39b4f0;


.skyblue {
    .delete {
        background: none;
    }

    .add {
        background: url("/image/skyblue_add.png") no-repeat 5px center;
        background-size: $background_icon_size;
    }

    .refresh {
        background: url("/image/skyblue_refresh.png") no-repeat 5px center;
        background-size: $background_icon_size;
    }

    .button {

        @each $var in primary,
        success,
        info,
        warning,
        danger {

            &-#{$var}-plain,
            &-#{$var} {
                @if $var==info {
                    background-color: $info;

                    &:hover {
                        background-color: $info_hover;
                    }

                    &:active {
                        background-color: $info_active;
                    }
                }

                @if $var==primary {
                    background-color: $primary;

                    &:hover {
                        background-color: $primary_hover;
                    }

                    &:active {
                        background-color: $primary_active;
                    }
                }

                @if $var==success {
                    background-color: $success;

                    &:hover {
                        background-color: $success_hover;
                    }

                    &:active {
                        background-color: $success_active;
                    }
                }

                @if $var==warning {
                    background-color: $warning;

                    &:hover {
                        background-color: $warning_hover;
                    }

                    &:active {
                        background-color: $warning_active;
                    }
                }

                @if $var==danger {
                    background-color: $danger;

                    &:hover {
                        background-color: $danger_hover;
                    }

                    &:active {
                        background-color: $danger_active;
                    }
                }
            }

            &-#{$var} {
                cursor: pointer;
                border-radius: $border_radius;
                color: white;
                transition: background-color .2s;
                border: none;
            }

            &-#{$var}-plain {
                background: none;
                transition: background-color .2s;
                cursor: pointer;
                border-radius: $border_radius;

                @if $var==info {
                    color: $info;
                    border: 1px solid $info;
                }

                @if $var==primary {
                    color: $primary;
                    border: 1px solid $primary;
                }

                @if $var==success {
                    color: $success;
                    border: 1px solid $success;
                }

                @if $var==warning {
                    color: $warning;
                    border: 1px solid $warning;
                }

                @if $var==danger {
                    color: $danger;
                    border: 1px solid $danger;
                }

                &:hover,
                &:active {
                    color: white;
                }
            }

            &-medium {
                width: $button_medium_width;
                height: $button_medium_height;
                line-height: $button_medium_height;
                font-size: $button_medium_size;
            }

            &-small {
                width: $button_small_width;
                height: $button_small_height;
                line-height: $button_small_height;
                font-size: $button_small_size;
            }

            &-mini {
                width: $button_mini_width;
                height: $button_mini_height;
                line-height: $button_mini_height;
                font-size: $button_mini_size;
            }
        }

    }

    .table_top thead tr th {
        background-color: $table_bg;
    }

    .table tbody tr td {
        text-align: center;
        position: relative;
        border: solid 1px #ecebeb;
        padding: 5px 5px;
        font-size: 16px;
        color: #1f1f1f;
        height: 40px;
    }

}